<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>编辑公告</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="/announcements">校园公告系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/announcements">公告列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/announcements/add">新增公告</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/lb-test">负载均衡测试</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title mb-0">编辑公告</h3>
                </div>
                <div class="card-body">
                    <form th:action="@{/announcements/edit/{id}(id=${announcement.id})}" 
                          th:object="${announcement}" method="post" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="title" class="form-label">标题 <span class="text-danger">*</span></label>
                            <input type="text" id="title" th:field="*{title}" class="form-control" required
                                   minlength="2" maxlength="100">
                            <div class="invalid-feedback">
                                请输入2-100个字符的标题
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">内容 <span class="text-danger">*</span></label>
                            <textarea id="content" th:field="*{content}" class="form-control" required
                                      minlength="10" maxlength="2000" rows="6"></textarea>
                            <div class="invalid-feedback">
                                请输入10-2000个字符的内容
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="author" class="form-label">作者 <span class="text-danger">*</span></label>
                            <input type="text" id="author" th:field="*{author}" class="form-control" required
                                   minlength="2" maxlength="50">
                            <div class="invalid-feedback">
                                请输入2-50个字符的作者名
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="publishDate" class="form-label">发布日期 <span class="text-danger">*</span></label>
                            <input type="datetime-local" id="publishDate" name="publishDateStr" 
                                   th:attr="value=${#dates.format(announcement.publishDate, 'yyyy-MM-dd''T''HH:mm')}"
                                   class="form-control" required>
                            <div class="invalid-feedback">
                                请选择发布日期
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="status" class="form-label">状态 <span class="text-danger">*</span></label>
                            <select id="status" th:field="*{status}" class="form-select" required>
                                <option value="">请选择状态</option>
                                <option th:each="status : ${T(com.example.campusannouncement.entity.Announcement.Status).values()}"
                                        th:value="${status}" th:text="${status}"></option>
                            </select>
                            <div class="invalid-feedback">
                                请选择状态
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="attachment" class="form-label">附件</label>
                            <input type="file" id="attachment" class="form-control" accept=".pdf,.doc,.docx,.txt">
                            <div class="form-text">支持的文件格式：PDF、Word、TXT</div>
                            <div th:if="${announcement.attachmentPath}" class="mt-2">
                                <span class="text-muted">当前附件：</span>
                                <a th:href="@{/api/announcements/attachment/{path}(path=${announcement.attachmentPath})}" 
                                   target="_blank" th:text="${announcement.attachmentPath}"></a>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="/announcements/list" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> 保存修改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 表单验证
    (function () {
        'use strict'
        const forms = document.querySelectorAll('.needs-validation')
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()

    // 设置日期时间选择器的最小值为当前时间
    document.getElementById('publishDate').min = new Date().toISOString().slice(0, 16);
</script>
</body>
</html>